<template>
    <div id="cover" @click="$emit('input',false)">
        <div id='gantt_cover'>
            <div id="gantt_target" @click.stop=''/>
        </div>
    </div>
</template>
<script>
import { timeFormat } from '@/utils/util.js'
export default {
    props: {
        value: {
            type: Boolean,
            default: false
        },
        showData: {
            type: Array,
            default: () => []
        }
    },
    watch: {
        value: {
            handler(n) {
                this.show = n
            }
        }
    },
    data() {
        return {
            div: null,
            show: false
        }
    },
    methods: {
        refreshGantt() {
            const self = this;
            const source = this.showData.map(item => {
                return {
                    id: item.id + "",
                    name: item.name,
                    start: item.targetStartDate,
                    end: item.targetEndDate,
                    dependencies: item.dependencies.join(',')
                }
            })
            if (self.div != null){
                self.div.refresh(source)
                return 
            }
            self.div = new Gantt("#gantt_target", source, {
                on_click: function (task) {
                    console.log(1,task);
                },
                on_date_change: function(task, start, end) {
                    if (task.children == undefined || task.children.length == 0) {
                        const index = self.showData.findIndex(item => item.id == task.id);
                        const result = {
                            start: {
                                value: new Date(timeFormat(start,'YYYY-MM-DD')),
                                key: 'targetStartDate',
                                task,index
                            },
                            end: {
                                value: new Date(timeFormat(end,'YYYY-MM-DD')),
                                key: 'targetEndDate',
                                task,index
                            }
                        }
                        self.$emit("ganttChange",result)
                    }
                },
                on_progress_change: function(task, progress) {
                    console.log(3,task, progress);
                },
                on_view_change: function(mode) {
                    console.log(4,mode);
                },
                view_mode: 'Week',
                language: 'zh'
            });
        }
    }
}
</script>
<style lang="less" scoped>
#cover {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #00000055;
    z-index: 99;
}
#gantt_cover {
    height: 600px;
    width: 60%;
    overflow: scroll;
    position: absolute;
    left: 50%;
    top: 30px;
    transform: translateX(-50%);
    background: #fff;
}
#gantt_target  {
    /deep/ .gantt-container{
        overflow: visible !important;
    }
    
}
</style>